<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入昵称" suffix-icon="el-icon-position" class="ml-5" v-model="nickname"></el-input>
      <el-input style="width: 200px" placeholder="请输入手机号码" suffix-icon="el-icon-position" class="ml-5" v-model="phone"></el-input>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'">

      <el-table-column prop="nickname" label="昵称"></el-table-column>
      <el-table-column prop="phone" label="手机号码"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>

    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {defineComponent} from "vue";
import request from "@/utils/request";
import _ from 'lodash';

export default defineComponent({
  name: "Customer",
  data(){
    return{
      lastSearchParams: {}, // 新增用于存储上一次搜索参数的对象
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      nickname: "",
      phone: "",

    }
  },
  created() {
    // 请求分页查询数据
    this.load()
  },
  methods:{
    load() {
      // 比较当前搜索参数与上一次搜索参数
      const currentParams = {
        className: this.className,
        pageSize: this.pageSize,
        nickname: this.nickname,
        phone: this.phone,
      };
      if (!_.isEqual(currentParams, this.lastSearchParams)) {
        this.pageNum = 1; // 如果参数不同，重置页码
        this.lastSearchParams = { ...currentParams }; // 更新上一次搜索参数
      };

      this.request.get("/merchant/individual/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          nickname: this.nickname,
          phone: this.phone,
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      });

    },

    reset() {
      this.nickname = "";
      this.phone = "";
      this.load();
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    }


  }
})
</script>


<style scoped>
.headerBg {
  background: #eee!important;
}
.fontSize18{
  font-size: 18px;
}
.fontSize12{
  font-size: 12px;
}

/* 可点击文本样式 */
.clickable-text {
  cursor: pointer;
  color: #1890ff; /* 链接颜色 */
  transition: all 0.2s ease;
}

/* 悬停效果 */
.clickable-text:hover {
  color: #40a9ff; /* 悬停时的颜色 */
  transform: scale(1.05); /* 稍微放大 */
}

/* 点击效果 */
.clickable-text:active {
  color: #1890ff; /* 点击时的颜色 */
  transform: scale(0.95); /* 稍微缩小 */
}
</style>
